<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Olympic Games</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>

    </style>
</head>
<body style="overflow-x:hidden;overflow-y:hidden;background-image:url(2.gif); background-size:cover;">
    <div id="Start" style="width: 800px; height: 600px; position: relative;">
        <div style="position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);">
            <button class="btn btn-danger btn-lg" id="startButton" onclick="Start();" style="text-align: center;">Start!</button>
        </div>
    </div>
    <div id="ShowID" style="display: none;">
    <div class="inputDiv" id="inputData">
        <form class="form-horizontal">
        
            <div class="form-group">
                <label for="" class="col-sm-offset-1 col-sm-2 control-label">国家数(n):</label>
                <div class="col-sm-5">
                    <input id="countryNum" class="form-control" type="text" value="5">
                </div>
            </div>
    
            <div class="form-group">
                <label for="" class="col-sm-offset-1 col-sm-2 control-label" >男子项目数(m):</label>
                <div class="col-sm-5">
                    <input id="manProjectNum" class="form-control" type="text" value="3">
                </div>
            </div>

            <div class="form-group">
                <label for="" class="col-sm-offset-1 col-sm-2 control-label">女子项目数(w):</label>
                <div class="col-sm-5">
                    <input id="womanProjectNum" class="form-control" type="text" value="2">
                </div>
            </div>
            <div class="form-group">
            <label class="col-sm-offset-1 col-sm-12 control-label" style="text-align:left">下面m+w行，请依次输入前三名或前五名的国家编号(1~n)，中间用空格作间隔:</label>
            <br>
            <textarea class="col-sm-offset-3 form-control" id="scoreInf" type="text" rows="10" style="width:400px">
1 2 3 4 5
3 2 1
1 2 3
4 5 1
3 4 5 1 2</textarea>
            </div>

        </form>
    </div>
    
    <div class="showDiv" id="showAllScores" style="display:none;">

    </div>

    <div class="form-group" style="text-align: center;">
        <button class="btn btn-warning" id="returnButton" onclick="Reset();" style="display: none;">重新输入</button>
        <button class="btn btn-primary" id="showAllScoresButton" onclick="ShowStatics();">展示总分</button>
        

        <button style="background-color: #dbf384; " class="btn btn-default" id="sortByNumButton" onclick="SortByNum();">编号排序</button>
        <button style="background-color: #edf05c; " class="btn btn-default" id="sortByScoreButton" onclick="SortByScore();">总分排序</button>
        <button style="background-color: #e9e76d; " class="btn btn-default" id="sortByManScoreButton" onclick="SortByManScore();">男团排序</button>
        <button style="background-color: #ecd92e; " class="btn btn-default" id="sortByWomanScoreButton" onclick="SortByWomanScore();">女团排序</button>
    </div>

    <div class="form-group">
        
        <label class="col-sm-12 control-label" style="text-align:left">请输入国家和项目编号进行详情查询(可以只填写其中一项作为关键字):</label>
        <div class="col-sm-offset-3 form-inline" role="form">    
            <input id="idCountry" class="col-sm-6 form-control" type="text">
            <input id="idProject" class="col-sm-6 form-control" type="text">
        
            <button class="btn btn-success" id="searchButton" onclick="Search();">搜索</button>
        </div>
    </div>
    </div>
    

    <script src="Country.js"></script>
    <script src="Calculate.js"></script>
    <script src="Return.js"></script>

</body>
</html>